<template>
  <div class="footer">
    <div class="content">
      <img style="height: 54px;" src="../assets/logo1.png" alt="" srcset="">
      <div class="m1">
        <div v-for="(item, i) in nav" :key="item" :class="`menu${i}`" @click="routeGo(item)">{{ item.name }}</div>
        <a class="contact" href="#">
          <img style="margin-right: 14px;" src="../assets/footer-1.png" alt="" srcset="">
          <span>info@lunamirrors.com</span>
        </a>
      </div>
    </div>
    <div class="line"></div>
    <div class="bottom">
      2024 © LunaMirrors Ltd™. All rights reserved.
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter()

const nav = [
  // { name: 'Home', link: '/home' },
  { name: 'Product Overview', link: '/product-overview' },
  { name: 'Technology', link: '/technology' },
  { name: 'About Us', link: '/about' },
]

const routeGo = (item) => {
  router.push(item.link)
}
</script>

<style lang="less" scoped>
.footer {
  min-height: 335px;
  background-color: #1e2d4e;
  border-top: 1px solid #1e2d4e;

  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 320px;
    row-gap: 50px;
    margin-top: 70px;

    .m1 {
      display: flex;
      flex-wrap: wrap;
      column-gap: 80px;
      row-gap: 20px;
      padding: 0 50px;
    }

    [class^="menu"] {
      display: flex;
      align-items: center;
      font-family: ArialMT;
      font-size: 21px;
      text-align: left;
      font-style: normal;
      cursor: pointer;
      color: #c2c6cf;
    }

    // each(range(0, 4), {
    //   .menu@{value} {
    //     grid-area: ~"menu@{value}";
    //   }
    // })
  }

  .line {
    margin: 37px auto;
    width: 80%;
    height: 1px;
    background: rgba(255, 255, 255, 0.27);
  }

  .bottom {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 21px;
    color: #bababa;
    line-height: 29px;
    text-align: center;
    font-style: normal;
    padding-bottom: 37px;
  }

  .contact {
    display: flex;
    align-items: center;
    font-family: ArialMT;
    font-size: 21px;
    color: #c2c6cf;
  }
}
</style>